

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f172a',
  },
  header: {
    backgroundColor: '#111827',
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
    paddingHorizontal: 16,
    paddingVertical: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  headerLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  backButton: {
    marginRight: 12,
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
  },
  headerRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerButton: {
    marginLeft: 12,
    padding: 4,
  },
  scrollView: {
    flex: 1,
  },
  section: {
    paddingHorizontal: 24,
    paddingVertical: 12,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#ffffff',
    marginBottom: 16,
  },
  card: {
    borderRadius: 16,
    padding: 24,
    ...Platform.select({
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  approvalHeader: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  approvalInfo: {
    flex: 1,
    marginRight: 16,
  },
  approvalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 8,
  },
  approvalMeta: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  metaItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 16,
  },
  metaText: {
    fontSize: 14,
    color: '#9ca3af',
    marginLeft: 4,
  },
  statusBadge: {
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 20,
  },
  statusText: {
    fontSize: 14,
    fontWeight: '500',
  },
  statusPending: {
    backgroundColor: 'rgba(245, 158, 11, 0.2)',
  },
  statusApproved: {
    backgroundColor: 'rgba(16, 185, 129, 0.2)',
  },
  statusRejected: {
    backgroundColor: 'rgba(239, 68, 68, 0.2)',
  },
  currentNode: {
    backgroundColor: '#111827',
    borderRadius: 12,
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  currentNodeLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  currentNodeLabel: {
    fontSize: 14,
    color: '#d1d5db',
    marginLeft: 8,
  },
  currentNodeText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#6366f1',
  },
  formField: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
  },
  formFieldLast: {
    borderBottomWidth: 0,
  },
  formLabel: {
    fontSize: 16,
    color: '#d1d5db',
    flex: 1,
  },
  formValue: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
    textAlign: 'right',
  },
  formTextValue: {
    fontSize: 16,
    color: '#ffffff',
    textAlign: 'right',
    flex: 1,
    marginLeft: 16,
    lineHeight: 24,
  },
  viewFlowButton: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  viewFlowText: {
    fontSize: 14,
    color: '#6366f1',
    marginRight: 4,
  },
  attachmentItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#111827',
    borderRadius: 12,
    padding: 12,
    marginBottom: 12,
  },
  attachmentInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  attachmentIcon: {
    width: 40,
    height: 40,
    backgroundColor: 'rgba(99, 102, 241, 0.2)',
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  attachmentDetails: {
    flex: 1,
  },
  attachmentName: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
    marginBottom: 2,
  },
  attachmentSize: {
    fontSize: 14,
    color: '#9ca3af',
  },
  downloadButton: {
    padding: 8,
  },
  processNode: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 24,
  },
  nodeCircle: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 16,
    zIndex: 2,
  },
  nodeLine: {
    position: 'absolute',
    left: 15,
    top: 32,
    width: 2,
    height: 96,
    backgroundColor: '#6366f1',
    zIndex: 1,
  },
  nodeCompleted: {
    backgroundColor: '#10b981',
  },
  nodeActive: {
    backgroundColor: '#6366f1',
  },
  nodePending: {
    backgroundColor: '#374151',
  },
  nodeContent: {
    flex: 1,
    paddingTop: 4,
  },
  nodeTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
    marginBottom: 4,
  },
  nodeTitlePending: {
    color: '#9ca3af',
  },
  nodeAssignee: {
    fontSize: 14,
    color: '#9ca3af',
    marginBottom: 2,
  },
  nodeAssigneeActive: {
    color: '#6366f1',
  },
  nodeTime: {
    fontSize: 12,
    color: '#6b7280',
  },
  historyItem: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 16,
  },
  historyIndicator: {
    width: 4,
    height: 40,
    backgroundColor: '#10b981',
    borderRadius: 2,
    marginRight: 16,
    marginTop: 4,
  },
  historyContent: {
    flex: 1,
  },
  historyHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  historyUserName: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
  },
  historyStatus: {
    fontSize: 14,
    color: '#10b981',
  },
  historyComment: {
    fontSize: 14,
    color: '#9ca3af',
    marginBottom: 4,
    lineHeight: 20,
  },
  historyTime: {
    fontSize: 12,
    color: '#6b7280',
  },
  approvalActions: {
    gap: 24,
  },
  commentLabel: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
    marginBottom: 12,
  },
  commentInput: {
    backgroundColor: '#111827',
    borderWidth: 1,
    borderColor: '#4b5563',
    borderRadius: 12,
    padding: 16,
    fontSize: 16,
    color: '#ffffff',
    minHeight: 80,
  },
  addAttachmentButton: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  addAttachmentText: {
    fontSize: 16,
    color: '#6366f1',
    marginLeft: 8,
  },
  bottomSpacing: {
    height: 100,
  },
  bottomActionBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#111827',
    borderTopWidth: 1,
    borderTopColor: '#374151',
    paddingHorizontal: 16,
    paddingVertical: 16,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16,
    ...Platform.select({
      ios: {
        paddingBottom: 34,
      },
      android: {
        paddingBottom: 16,
      },
    }),
  },
  rejectButton: {
    flex: 1,
    backgroundColor: '#ef4444',
    borderRadius: 12,
    paddingVertical: 12,
    paddingHorizontal: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  rejectButtonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
  },
  approveButton: {
    flex: 1,
    borderRadius: 12,
    overflow: 'hidden',
  },
  approveButtonGradient: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  approveButtonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
  },
  moreActionsButton: {
    width: 48,
    height: 48,
    backgroundColor: '#0f172a',
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    paddingRight: 16,
    paddingBottom: 120,
  },
  moreActionsMenu: {
    backgroundColor: '#111827',
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#374151',
    minWidth: 200,
    ...Platform.select({
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 8,
      },
      android: {
        elevation: 8,
      },
    }),
  },
  moreActionItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  moreActionIcon: {
    width: 24,
    textAlign: 'center',
  },
  moreActionText: {
    fontSize: 16,
    color: '#ffffff',
    marginLeft: 8,
  },
});

